/** @jsxImportSource @emotion/react */
import * as React from "react";
import { css,  } from "@emotion/react";
import {InspectRecordLayout, SelectHookfork, SelectInput, useItemInputControl} from "../common/base";
import {BlobInputList, Input, InputLine, LineColumn, Text} from "customize-easy-ui-component";
import {RecordEvalArea} from "./config";

//检验项目的标准化展示组件
interface Props  extends React.HTMLAttributes<HTMLDivElement>{
    editAreasConf: RecordEvalArea[];
    /**单一个路由可编辑区域对应的 一部分项目列表的 配置*/
    index: number;
    show?: boolean;
    alone?: boolean;
    ref?: any;
    refWidth?: number;
    /**后面两个参数：定制 ，确认日期字段 有些项目需要拆分为两个日期输入的情况；
     * */
    custST?: (area:RecordEvalArea,par:any,fields:any)=>any;
    /** '资料确认描述或存在问题描述' 输入框的可选择的列表文本。
     * */
    sureList?: string[];
}
export const 严重程度选=["1","2","3","4"];
export const 风险频率选=["A","B","C","D","E","F"];
//【单一个编辑区域的】 全部项目。
export const ActionMapItemLikeSafeEval=
    React.forwardRef((
        { children, show=true, alone=true,editAreasConf,index,refWidth,custST,sureList}:Props, ref
    ) => {
        const config=editAreasConf[index];
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            //配置动态命名的字段获取旧的值，还想保存修改数据，还要界面同步显示变化数值的场景，就按这里做法。
            config.items?.forEach((tago, i) => {
                if(tago.weight!==undefined){
                    fields[`${tago.name}_F`]= par[`${tago.name}_F`];    //评分
                }
                fields[tago.name] =par[tago.name];
                fields[`${tago.name}_D`]= par[`${tago.name}_D`];
                fields[`${tago.name}_C`]= par[`${tago.name}_C`];    //严重程度
                fields[`${tago.name}_P`]= par[`${tago.name}_P`];    //风险频率
            });
            if(custST)
                fields=custST(config, par, fields);
            // const {见证资料表 }= par;
            return fields;
        }, [config,custST]);
        const {inp, setInp} = useItemInputControl({ ref });
        // const 见证资料选择=inp?.见证表?.map((a:any, i:number) => a.no);
        const render =React.useMemo(() => {
            let htmlTxts =[] as any[];
            let bigLabel='';
            let secoLabel='';
            //允许本编辑区的配置继承来自前面的编辑区。反方向去搜索配置。【前提】最低一级或者第四级别必然做配置的。 x y z可能省略配置。editAreasConf[0]第一个必然会配置全套的。
            //【不同点】允许相等检验项目栏目编码串的，直接融合正在编辑的项目区域显示。
            for(let wf=0; wf<config.items?.length; ){
                const tago=config.items[wf];
                //连续跟随的几个项目是否 ？多个具有相同的项目编码串 alikeSize=相同的个数 项目栏目编码串判定一摸一样横跨剩下几个行的；
                if(tago) {
                    let weightTag;
                    if(tago.weight!==undefined){
                        //但seco若=''也要剔除。
                        weightTag=tago.tips??(tago.seco? tago.seco :undefined)??tago.titl;      //可以默认 顺序使用
                    }
                    bigLabel=tago.big??bigLabel;
                    secoLabel=tago.seco??secoLabel;     //针对单个编辑区的遗传
                    // console.log("嵌入DOM废话类型明确吗=",selfSplit,"desc=",tago);
                    const rowHead =<div key={wf} css={{marginTop: '1rem'}}>
                        <div css={{ display: 'flex', justifyContent: 'space-around' }}>
                            <Text variant="h6">{tago.pre??''}{tago.x}.{tago.y}{tago.iclas??''}</Text>
                            <Text variant="h6">{bigLabel} {secoLabel}</Text>
                            <Text variant="h6">{tago.titl}</Text>
                        </div>
                            <div css={{ display: 'flex', justifyContent: 'space-around' }}>
                                        { typeof tago.desc === "string"?
                                            <Text  variant="h5">
                                                {tago.desc}
                                            </Text>
                                            :
                                            tago.desc
                                        }

                            </div>
                            <hr/>
                            <LineColumn column={8} >
                                <InputLine label={tago.titl+'-结果'}>
                                    <SelectHookfork value={(inp?.[tago.name]) || ''} onChange={e => {
                                                setInp({ ...inp, [tago.name]: e.currentTarget.value || undefined}); }} />
                                </InputLine>

                                <InputLine label={'严重程度'}>
                                    <SelectInput value={(inp?.[`${tago.name}_C`]) || ''}  list={严重程度选}  onChange={e => {
                                                setInp({ ...inp, [`${tago.name}_C`]: e.currentTarget.value || undefined}); }} />
                                </InputLine>
                                <InputLine label={'风险频率'}>
                                    <SelectInput value={(inp?.[`${tago.name}_P`]) || ''}  list={风险频率选}  onChange={e => {
                                                setInp({ ...inp, [`${tago.name}_P`]: e.currentTarget.value || undefined}); }} />
                                </InputLine>
                            </LineColumn>
                            <LineColumn column={4} >
                                <InputLine label='确认或问题描述'>
                                    <BlobInputList value={(inp?.[`${tago.name}_D`]) || ''}   datalist={sureList}
                                                   onListChange={v => setInp({...inp, [`${tago.name}_D`]: v || undefined}) } />
                                </InputLine>
                                { tago.weight!==undefined &&
                                    <>
                                        {typeof tago.weight === 'number' ? <div css={{display: 'flex', flexDirection: 'column', justifyContent: 'space-around'}}>
                                                <Text css={{fontSize: '1rem', textIndent: '0.5rem'}}>{weightTag}-权重(
                                                    <Text css={{fontSize: '1.2rem', fontWeight: 700}}>{tago.weight}</Text>
                                                    )评分:</Text>
                                                <InputLine label={`得分`} labelTextStyle={css`font-size:1.7rem;font-weight:bolder;color:black;`}>
                                                    <Input type={"number"} value={(inp?.[`${tago.name}_F`]) || ''}
                                                           onChange={e => {
                                                               setInp({...inp, [`${tago.name}_F`]: e.currentTarget.value || undefined});
                                                           }}/>
                                                </InputLine>
                                            </div>
                                         :
                                            <div css={{margin:'auto'}}><Text css={{fontSize: '1.2rem'}}>{weightTag}</Text>
                                                 <Text css={{fontSize: '1.4rem',fontWeight: 700}}>{tago.weight}</Text>
                                            </div>
                                        }
                                    </>
                                }
                            </LineColumn>
                    </div>;

                    htmlTxts.push(rowHead);
                }
                wf += 1;
            }

            return htmlTxts;
        }, [config, index, inp, setInp, editAreasConf, sureList]);

        return (<InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                     alone={alone} label={`${config.name ?? config.tag}`}
        >
            {render}
        </InspectRecordLayout>);
    });
